<template>
    <div class="ff-pagination">
        <div class="ff-page-box">
            <span
                class="ff-pagination-left ff-pagination-more"
                :class="{'ff-pagination-no-left': Number(current) === 1, 'ff-pagination-small': size === 'small'}"
                @click="pageChange(current - 1)"
                v-if="total != 0"
            >上一页</span>
            <ul class="ff-pagination-page" @click="onPagerClick" :class="{'ff-pagination-page-small': size === 'small'}">
                <li
                    class="ff-pagination-page-single"
                    :class="{'ff-pagination-page-light': Number(current) === 1}"
                    v-if="totalPage > 0"
                >1</li>
                <li
                    v-if="showPrevMore"
                >
                    ···
                </li>
                <li
                    v-for="pager in pagers"
                    :key="pager"
                    :class="{ 'ff-pagination-page-light' : Number(current) == pager }"
                    class="ff-pagination-page-single">{{ pager }}</li>
                <li
                    v-if="showNextMore"
                >
                    ···
                </li>
                <li
                    class="ff-pagination-page-single"
                    :class="{'ff-pagination-page-light': Number(current) === totalPage}"
                    v-if="totalPage > 1"
                >{{totalPage}}</li>
            </ul>
            <span
                class="ff-pagination-right ff-pagination-more"
                :class="{'ff-pagination-no-right': Number(current) === totalPage, 'ff-pagination-small': size === 'small'}"
                @click="pageChange(Number(current) + 1)"
                v-if="total != 0"
            >下一页</span>
            <!--<span class="ff-page-total">共{{totalPage}}页</span>-->
        </div>
    </div>
</template>

<script>
    export default {
        name: 'FfPagination',
        props: {
            PageSize: {
                type: Number,
                default: 5
            },//每页显示个数
            total: {
                type: Number,
                default: 1
            },//总个数
            CurrentPage: {
                type: [Number,String],
                default: 1
            },//当前页
            size: {
                type: String,
                default: 'default'
            }//尺寸
        },
        data () {
            return {
                showPrevMore: false,//左边点号是否显示
                showNextMore: false,//右边点号是否显示
                jump: '',//输入框值
            }
        },
        methods: {
            /*左右切换改变当前页*/
            pageChange (val) {
                if(val === 0 || val === this.totalPage + 1 ) return
                this.$emit('update:CurrentPage',val);
                this.$emit('change',val);
                this.jump = '';
            },
            /*点击改变当前页*/
            onPagerClick(event) {
                const target = event.target;
                if (target.tagName === 'UL' || event.target.textContent === '') {
                    return;
                }

                let newPage = Number(event.target.textContent);
                const pageCount = this.totalPage;
                const currentPage = this.current;

                /* istanbul ignore if */
                if (!isNaN(newPage)) {
                    if (newPage < 1) {
                        newPage = 1;
                    }

                    if (newPage > pageCount) {
                        newPage = pageCount;
                    }
                }

                if (newPage !== currentPage) {
                    this.$emit('update:CurrentPage',newPage);
                    this.pageChange(newPage);
                }
            },
            /*跳页*/
            jumper (val) {
                let jump = val < 1 ? this.jump = 1 : val > this.totalPage ? this.jump = this.totalPage : val;
                this.pageChange(jump);
            },
        },
        components: {

        },
        computed: {
            totalPage () {
                return Math.ceil(this.total / this.PageSize);
            },//总页数
            current () {
                return this.CurrentPage;
            },//当前页
            pagers () {
                let _this = this;
                const pagerCount = 7;
                const currentPage = Number(this.current);
                const pageCount = Number(this.totalPage);
                let showPrevMore = false;
                let showNextMore = false;
                if (pageCount > pagerCount) {
                    if (currentPage > pagerCount - 3) {
                        showPrevMore = true;
                    }

                    if (currentPage < pageCount - 3) {
                        showNextMore = true;
                    }
                }
                const array = [];
                if (showPrevMore && !showNextMore) {
                    const startPage = pageCount - (pagerCount - 2);
                    for (let i = startPage; i < pageCount; i++) {
                        array.push(i);
                    }
                } else if (!showPrevMore && showNextMore) {
                    for (let i = 2; i < pagerCount; i++) {
                        array.push(i);
                    }
                } else if (showPrevMore && showNextMore) {
                    const offset = Math.floor(pagerCount / 2) - 1;
                    for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
                        array.push(i);
                    }
                } else {
                    for (let i = 2; i < pageCount; i++) {
                        array.push(i);
                    }
                }
                _this.showPrevMore = showPrevMore;
                _this.showNextMore = showNextMore;
                return array;
            },//中间的显示数据
        },
        mounted () {

        }
    }
</script>

<style type="text/less" lang="less">
    @border-color: #DCDCDC;
    @font-light-black: #A4A9AE;
    @page-disabled: #999;
    @orange: #fd6442;
    @font-blue: #0F8EE9;
    .page-style() {
        width: 36px;
        height: 32px;
        display: inline-block;
        text-align: center;
        line-height: 32px;
        box-sizing: border-box;
        font-size: 12px;
        cursor: pointer;
        font-weight: bold;
        color: @font-light-black;
    }
    .ff-pagination {
        display: inline-block;
        .ff-page-box {
            display: flex;
            font-size: 12px;
            color: @font-light-black;
            align-items: center;
            .ff-pagination-more {
                .page-style();
                border: 1px solid @border-color;
                width: 60px;
                color: #333;
            }
            .ff-pagination-small {
                height: 28px;
                line-height: 28px;
            }
            .ff-pagination-left,.ff-pagination-right  {
                border-radius: 4px;
            }
            .ff-pagination-no-left, .ff-pagination-no-right {
                color: @page-disabled;
                cursor: not-allowed;
                background-color: #fff;
            }
            .ff-page-total {
                display: inline-block;
                vertical-align: middle;
                margin-left: 10px;
                line-height: 14px;
            }
            .ff-page-jump {
                display: inline-block;
                font-size: 12px;
                vertical-align: top;
                line-height: 14px;
                margin-left: 10px;
            }
            .ff-page-jump-input {
                width: 36px;
                height: 32px;
                .ff-input__inner {
                    height: 32px;
                    padding: 4px;
                    border-radius: 4px;
                }
            }
            .ff-page-jump-btn {
                width: 40px;
                padding: 5px 0;
                margin-left: 10px;
                color: #575757;
                border-color: #dcdfe6;
                &:hover {
                    border-color: @orange;
                    color: @orange;
                    background-color: #fff;
                    opacity: 1;
                }
            }
        }
        .ff-pagination-page {
            display: inline-flex;
            li {
                .page-style();
            }
            .ff-pagination-page-single {
                &:hover {
                    color: @font-blue;
                }
            }
            .ff-pagination-page-light {
                color: @orange;
                &:hover {
                    color: @orange;
                }
            }
        }
        .ff-pagination-page-small {
            li {
                height: 28px;
                line-height: 28px;
            }
        }
    }

</style>